<template>
	<div class="common">
		<div class="mask" v-if="dialog" @tap="hide"></div>
		<transition name="slideup">
			<div class="content" v-if="dialog">
				<div class="top">
					<div @click="hide">
						<img src="../../static/img/icon/release_icon/close@3x.png"/>
					</div>
					<div>
						写评论
					</div>
					<div @click="submit">
						<img src="../../static/img/icon/find_icon/fasong.png"/>
					</div>
				</div>
				<div class="bottom">
					<textarea name="" rows="5" cols="" v-model="content" :placeholder="placeholder"></textarea>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ''
			},
			id: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				content: '',
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			submit() {
				this.$emit('submit', this.content, this.id)
			}
		}
	}
</script>

<style lang="less" scoped>
	.slideup-enter-active{
        animation-name: slideInUp;
        animation-duration: .2s;
        animation-fill-mode: both
    }
    .slideup-leave-active {
        animation-name: slideOutDown;
        animation-duration: .5s;
        animation-fill-mode: both
    }
    @keyframes slideInUp {
        0% {
            transform: translate3d(0,100%,0);
            visibility: visible
        }

        to {
            transform: translateZ(0)
        }
    }
    @keyframes slideOutDown {
        0% {
            transform: translateZ(0)
        }

        to {
            visibility: hidden;
            transform: translate3d(0,100%,0)
        }
    }
	
	.common {
		
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 100;
			background: rgba(0,0,0,0.6);
		}
	
		.content {
			position: fixed;
			bottom: 0;
			height: 25%;
			width: 100%;
			background: #fff;
			z-index: 101;
		
			.top {
				/*height: 50px;*/
				padding: 10px;
				justify-content: space-between;
				display: flex;
			
				div {
					font-size: 14px;
				}
			
				img {
					width: 18px;
					height: 18px;
				}
			}
		
			.bottom {
			
				textarea {
					padding-top: 0;
					font-size: 12px;
				}
			}
		}
	}
	
</style>